$(function(){

	let pokers = new Pokers();
	pokers.homePokers(pokers);
	//等待
  setTimeout(function(){
    pokers.homePokersAction()
    loginAction();
  },500);
	
});
class Pokers {
    constructor() {
        this.points = ['7', 'JOKER', '5', '2', '3', 'A', 'K', 'Q', 'J', '10', '9', '8', '6', '4']; //牌面
        this.types = ['黑桃', '红桃', '梅花', '方块']; //牌色
        this.pokers = []; //扑克牌
        this.size = 0; //牌大小
        this.dir;
        this.decor;
        this.init(); //生成扑克牌 
      }
      // 初始化牌
    init() {
        // ES6写法
        this.points.forEach((v, i) => {
          // 判断如果是大小王只能由两种颜色
          v == 'JOKER' ? this.types = ['黑桃', '红桃'] : this.types = ['♠', '♥', '♣', '♦']
          this.types.forEach((t, j) => {
            let item = {};
            this.size++;
            item.name = v; //牌名		
            item.size = this.size; //牌大小
            item.decor = t; //牌色
           	item.dir = "\A";
            this.pokers.push(item);

          })
        })
   }
  	homePokers(pokers){
  		var ul = $('.zhu-poker');
  		var deg = 0;
  		var rotateBeg = "rotate(";
  		var content;
  		//遍历牌
  		pokers.pokers.forEach((t,i) => {
  			var li = $("<li></li>");
  			ul.append(li);
  			deg+=3;
  			content =t.name + "\\A" + t.decor;
  			i+=1;
  			if(i%2==1){
  				document.styleSheets[1].addRule(".zhu-poker > li:nth-child("+i+"):after",'content:"'+content+'"');
  				document.styleSheets[1].addRule(".zhu-poker > li:nth-child("+i+"):after","color:black");
  				document.styleSheets[1].addRule(".zhu-poker > li:nth-child("+i+"):before",'content:"'+content+'"');
  				document.styleSheets[1].addRule(".zhu-poker > li:nth-child("+i+"):before","color:black");
  			}else{
  				document.styleSheets[1].addRule(".zhu-poker > li:nth-child("+i+"):after",'content:"'+content+'"');
  				document.styleSheets[1].addRule(".zhu-poker > li:nth-child("+i+"):before",'content:"'+content+'"');
  			}
  		})	
    }		
    homePokersAction(){
      let list = document.querySelectorAll('li');
        let rotate = 0; //角度
        list.forEach(item=>{
        item.style.transform = `rotate(${rotate}deg)`
        item.style.transition = `3s all`
      rotate += 3;
  });
    }
}
function loginAction(){
  var ul = $(".zhu-poker")
  $("#homeAction").click(function(){
    $(this).remove();
    ul.fadeOut("slow");
    setTimeout(function(){
       ul.remove();
       setTimeout(loginDiv,500);
    },1000);
   
  });
}
//2.弹出注册框
function loginDiv(){
  var logindiv = $("<div class='loginDiv' id='loginDiv'></div>");
  var name = $("<input class='name' id='name' type='text' name='name' value='账号' />");
  var loginButton = $("<button id='loginButton' class='loginButton'>登陆</button>");
  logindiv.append(name);
  logindiv.append(loginButton);
  $('#box').append(logindiv);
  name.focus(function(){
     $(this).val('');
	 $(this).css('color','black');
    });
  var val ='';
  loginButton.click(function(){
	if($('span').length > 0){
		console.log($('span').length);
		$('span').remove();
	}
	val = name.val();
	//TODO 提交
    if(val.length == 0 || val == null || val === '账号'){
		$(this).after("<span class='span' color='red'>昵称已存在,请重新输入</span>");
    }else{
		
	}
  });
}